<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name=viewport
    content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,minimal-ui">
  <meta name="referrer" content="no-referrer">
  <link rel="stylesheet" href="https://unpkg.byted-static.com/xgplayer/3.0.10/dist/index.min.css">
  <title>播放器</title>
  <style type="text/css">
    html,
    body {
      width: 100%;
      height: 100%;
      margin: auto;
      overflow: hidden;
    }

    body {
      display: flex;
    }

    #mse {
      flex: auto;
    }
  </style>
 
</head>

<body>
  <div id="mse"></div>
  <div> <button onclick="switchClick()">切换地址</button></div>
  <div> <button onclick="switch360Click()">切换360地址</button></div>
  <!-- <script charset="utf-8" src="https://unpkg.byted-static.com/xgplayer/3.0.10/dist/index.min.js"></script> -->
  <script src="//unpkg.com/xgplayer@latest/dist/index.min.js"></script>
  <script src="//unpkg.com/xgplayer@latest/dist/index.min.css"></script>
  <script src="//unpkg.com/xgplayer-flv@latest/dist/index.min.js"></script>
  
  <script type="text/javascript">
    let isShow = true
    let lastFPS;
    let timer;
    let touchTap=0
    let url ="https://play-ws.zlive.lesimao.net/lesimao/RP-MAIN-LE-425b69-0.flv"
    let player = new window.Player({
      id: 'mse',
      isLive: true,
      playsinline: true,
      minCachedTime:5,
      url:"https://play-ws.zlive.lesimao.net/lesimao/RP-MAIN-LE-425b69-0.flv",
      plugins: [window.FlvPlayer],
      // autoplayMuted: true, //静音播放
      controls: true,
      autoplay: false,  //自动播放
      flv: {
        retryCount: 100, // 重试 100 次
      retryDelay: 1000, // 每次重试间隔 3 秒
      loadTimeout: 15000, // 请求超时时间为 10 秒，默认值
      maxReaderInterval: 1000 * 60 * 15, // 直播结束时间 15分钟
      },
  
      closeControlsBlur: true,
      closeVideoDblclick: true,
      closeVideoClick: true,
      closeFocusVideoFocus: true,
      closePauseVideoFocus: true,
      closePlayVideoFocus: true,
      closeDelayBlur: true,
      // ignores: [
      //   'pip',
      //   'miniscreen',
      //   'keyboard',
      //   'download',
      //   'playbackrate',
      //   'time',
      //   'definition',
      //   'error',
      //   'fullscreen',
      //   'loading',
      //   'mobile',
      //   'play',
      //   'poster',
      //   'start',
      //   'volume',
      //   'replay',
      //   'prompt',
      //   'enter',
      //   'miniprogress',
      //   'progresspreview',
      // ],

    });
    // function switchUrl(){
    //   let url ='http://play-ws.zlive.lesimao.net/lesimao/VkVm_360p.flv'
    //   player.switchURL(url);
    // }
    player.on('error', function (e) {
      console.error('error', e)
    });
    player.on('canplay', function (e) {

      console.log('canplay', e)
    });
    player.on('play', function (e) {
      console.log('play', e)
    });
    player.on('end', function (e) {
      console.log('end', e)

    });
    player.on('pause', function (e) {

      console.log('pause', e)
    })
    player.on('waiting', function (e) {

console.log('waiting', e)
})   
player.on('loadstart', function (e) {

console.log('loadstart', e)
})   
player.on('loadeddata', function (e) {

console.log('LOADED_DATA', e)
})   
console.log('window.Player.Events', Object.keys(Player.Events))
Object.keys(Player.Events).forEach(key => {
  //@ts-ignore
  console.log("=====",key)
  player.on(Player.Events[key], function(e) {
    //@ts-ignore
    if(Player.Events[key]!="timeupdate"&&Player.Events[key]!="progress") {
       //@ts-ignore
      console.log('=========',Player.Events[key], e,new Date().getTime())
    }
    
  })

  // 可以在这里进行进一步的操作，比如根据键名执行其他操作
})
    
    // player.on('core_event', ({
    //   eventName,
    //   ...rest
    // }) => { // eventName: flv 事件名; rest: flv 事件回调函数参数
    //   console.log('？？？？eventName', eventName)
    //   // 解析SEI数据
    //   if (eventName === 'core.sei') {
    //     let data = rest.sei.content
    //     let arr = Array.from(data)
    //     arr = String.fromCharCode(...arr)
    //     arr = arr.split('}')[0] + '}'
    //     arr = JSON.parse(arr)
    //     const ts = Math.trunc(arr.CloudPlayerPlayingProgress / 1000)
    //     console.log('sei time => ', ts)
    //   }
    // })
    // player.on('playing', function (e) {
    //   if (!timer) {
    //     timer = setInterval(() => {
    //       if (isShow) {
    //         console.log(player.plugins.flv.core.playbackQuality())
    //         console.log("渲染帧率", player.plugins.flv.core.playbackQuality().totalVideoFrames - lastFPS)
    //         console.log("缓存", player.plugins.flv.core.getStats().bufferEnd,player.plugins.flv.core.speedInfo().speed,player.plugins.flv.core.getStats().downloadSpeed,player.plugins.flv.core.getStats().avgSpeed)
    //         lastFPS = player.plugins.flv.core.playbackQuality().totalVideoFrames
    //       }

    //     }, 1000);
    //   }

    //   console.log('playing', e)
    // })
    // player.on(Events.AUTOPLAY_PREVENTED, () => {
    //   //监听到自动播放失败 引导交互 再次播放
    // });
    //进入后台 浏览器不会渲染，避免误切
    document.addEventListener('visibilitychange', function () {
      if (document.visibilityState === 'hidden') {
        isShow = false
        // 在这里执行当浏览器退到后台时需要执行的代码
      } else if (document.visibilityState === 'visible') {
        isShow = true
        console.log('浏览器已回到前台');
        // 在这里执行当浏览器回到前台时需要执行的代码
      }
    });
    function switchClick() {

//@ts-ignore
let urlStr =touchTap==1?url:"https://play-ws.zlive.lesimao.net/lesimao/RP-MAIN-LE-425b69-0_540p.flv";
  touchTap==1?touchTap=0:touchTap=1;
    console.log('switchURL :', urlStr);
//@ts-ignore
player.switchURL(urlStr)
      //@ts-ignore
player.reload();
}
function switch360Click() {

//@ts-ignore
let urlStr ="https://play-ws.zlive.lesimao.net/lesimao/RP-MAIN-LE-425b69-0_360p.flv";
    console.log('switchURL :', urlStr);
//@ts-ignore
player.switchURL(urlStr)
      //@ts-ignore
player.reload();
}

  </script>
</body>

</html>